<template>
  <div class="call-history col-lg-12 control-section">
      <div class="layoutWrapper">
          <div class="speaker">
              <div class="camera"></div>
          </div>
          <div class="layout">
              <div id="list-container">
                  <div class="tabContainer">
                      <!-- Tab element -->
                      <div id="tab" tabindex="1">
                          <ejs-tab id="tab_default" ref="listTab" tabindex="1" :selected='onSelected'>
                              <e-tabitems>
                                  <e-tabitem :header='tabHeader[0]' content="#all">
                                  </e-tabitem>
                                  <e-tabitem :header='tabHeader[1]' content="#received">
                                  </e-tabitem>
                                  <e-tabitem :header='tabHeader[2]' content="#missed">
                                  </e-tabitem>
                              </e-tabitems>
                          </ejs-tab>
                      </div>
                  </div>
                  <ejs-listview id="all" :dataSource='callHistoryData' :cssClass='cssClass' style="display:none" :fields="listFields" :template="listTemplate">
                  </ejs-listview>
                  <ejs-listview id="received" :dataSource='callHistoryData' :cssClass='cssClass' style="display:none" :fields="listFields" :template="listTemplate">
                  </ejs-listview>
                  <ejs-listview id="missed" :dataSource='callHistoryData' :cssClass='cssClass' style="display:none" :fields="listFields" :actionComplete="onComplete"
                      :template="listTemplate">
                  </ejs-listview>
              </div>
          </div>
          <div class="outerButton"> </div>
      </div>
      <div id="action-description">
          <p>This sample demonstrates the call history application using listview. Click on the checklist
              to filter the data in contacts list.
          </p>
      </div>
      <div id="description">
          <p>This sample filters out the data from listview based on the data selected from the checklist.
              Here, listview utilizes the
              <code>template</code>
              <code>showIcon</code> properties to repesent the call history application. The Tab component
              is used in this sample for navigation purposes.
          </p>
      </div>
  </div>
</template>
<style>
/* Layout customization */

.layoutWrapper {
  line-height: initial;
  border: 1px solid black;
  width: 285px;
  height: 505px;
  margin: auto;
  margin-bottom: 15px;
  border-radius: 28px;
  position: relative;

}

.layoutWrapper .speaker {
  border: 1px solid black;
  border-radius: 5px;
  width: 33.33333333%;
  height: 5px;
  margin: 15px auto 0px auto;
  position: relative;
}

.layoutWrapper .outerButton {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  border-radius: 50%;
  position: absolute;
  bottom: calc(0% + 10px);
  left: calc(50% - 15px);
}

.layoutWrapper .camera {
  position: absolute;
  left: calc(-15% - 10px);
  top: -100%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid black;
}

.layoutWrapper .layout {
  border: 1px solid black;
  margin: 20px 13px 0px 13px;
}

.layout #list-container .e-list-item {
  cursor: pointer;
}

.layoutWrapper.e-device-layout {
  visibility: visible;
}

.e-visbile-layer {
  visibility: visible;
}

/* ListView customization */

@font-face {
  font-family: "Phone Icons";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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);
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Call-icons";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRoAAAEoAAAAVmNtYXDOHM5nAAABjAAAAEBnbHlmtaNmiAAAAdQAAAEkaGVhZBAo7yMAAADQAAAANmhoZWEHegNsAAAArAAAACRobXR4C9H/wgAAAYAAAAAMbG9jYQBIAJIAAAHMAAAACG1heHABDwA6AAABCAAAACBuYW1ltZtoBgAAAvgAAAJJcG9zdNgJzA8AAAVEAAAAWAABAAADUv9qAFoEAP/h//4D6gABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAvvVLOF8PPPUACwPoAAAAANafVTkAAAAA1p9VOf/h/+ED6gPrAAAACAACAAAAAAAAAAEAAAADAC4AAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAgNS/2oAWgPrAJYAAAABAAAAAAAABAAAAAPo/+ED6P/hAAAAAgAAAAMAAAAUAAMAAQAAABQABAAsAAAABgAEAAEAAucA5wL//wAA5wDnAv//AAAAAAABAAYABgAAAAEAAgAAAAAASACSAAL/4f/hA+oD6wAGACgAAAEnAyUnNyclDwEGEgAEPwE2NC8BJgciBg8BBiYnLgE/ATY0LwEmByIGAoldLAFSa5Zd/V8DUUp9AT4BU5JUFRVUGR0QHAxXXKZNUE4hSxUVVRgdDhoC913+rytrll5LBFGS/q7+wH9KVRg8FlUWAQwJTyBNUFClXVUYPBZXFwEJAAL/4f/hA+oD6wALAC0AAAEjFTMVMzUzNSM1IyUPAQYSAAQ/ATY0LwEmByIGDwEGJicuAT8BNjQvASYHIgYCmXp6S3p6S/3mA1FKfQE+AVOSVBUVVBkdEBwMV1ymTVBOIUsVFVUYHQ4aAsRLenpLepoEUZL+rv7Af0pVGDwWVRYBDAlPIE1QUKVdVRg8FlcXAQkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBDYWxsLWljb25zUmVndWxhckNhbGwtaWNvbnNDYWxsLWljb25zVmVyc2lvbiAxLjBDYWxsLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABDAGEAbABsAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAQwBhAGwAbAAtAGkAYwBvAG4AcwBDAGEAbABsAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABDAGEAbABsAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFHRlbGVwaG9uZS0tLWluY29taW5nF3RlbGVwaG9uZS0tLWFkZGNhbGwtLTAyAAA=);
  font-weight: normal;
  font-style: normal;
}

.layout
  #list-container
  #all.e-listview.e-list-template
  .e-list-wrapper.e-list-multi-line,
.layout
  #list-container
  #received.e-listview.e-list-template
  .e-list-wrapper.e-list-multi-line,
.layout
  #list-container
  #missed.e-listview.e-list-template
  .e-list-wrapper.e-list-multi-line {
  padding: 5px;
}

.layout
  #list-container
  #all.e-listview.e-list-template
  .e-list-wrapper.e-list-avatar,
.layout
  #list-container
  #received.e-listview.e-list-template
  .e-list-wrapper.e-list-avatar,
.layout
  #list-container
  #missed.e-listview.e-list-template
  .e-list-wrapper.e-list-avatar {
  padding-left: 50px;
  padding-right: 5px;
}

.layout
  #list-container
  #all.e-listview.e-list-template
  .e-list-wrapper.e-list-multi-line.e-list-avatar
  .e-avatar,
.layout
  #list-container
  #received.e-listview.e-list-template
  .e-list-wrapper.e-list-multi-line.e-list-avatar
  .e-avatar,
.layout
  #list-container
  #missed.e-listview.e-list-template
  .e-list-wrapper.e-list-multi-line.e-list-avatar
  .e-avatar {
  top: 5px;
  left: 5px;
}

.layout #list-container #all,
.layout #list-container #received,
.layout #list-container #missed {
  max-height: 360px;
}

.layout #list-container {
  height: 405px;
}

.layout #list-container .received {
  font-family: Call-icons;
}

.layout #list-container .received:before {
  content: "\e700";
  font-size: 8px;
  margin-right: 6px;
}

.layout #list-container .missed {
  font-family: Call-icons;
}

.layout #list-container .missed:before {
  content: "\e702";
  font-size: 8px;
  margin-right: 6px;
}

.layout #list-container .e-icon {
  font-family: 'e-customized-icons';
  background: transparent;
  color: black;
}

.bootstrap4 .layout #list-container .e-listview .e-active .e-icon {
        color: #fff;
}

@font-face {
  font-family: 'e-customized-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.layout #list-container .e-icon:before {
  content: "\e902";
}

/* ListView theme customization */

.highcontrast .layoutWrapper .layout,
.highcontrast .layoutWrapper .camera,
.highcontrast .layoutWrapper .outerButton,
.highcontrast .layoutWrapper .speaker,
.highcontrast .layoutWrapper {
  border-color: white;
}
</style>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
import { TabPlugin } from "@syncfusion/ej2-vue-navigations";
import { Browser } from "@syncfusion/ej2-base";
import callHistoryTemplate from "./call-history-template.vue";
import { callHistory } from "./listData";
Vue.use(ListViewPlugin);
Vue.use(TabPlugin);
export default Vue.extend({
  data: function() {
    return {
      cssClass: 'e-list-template',
      callHistoryData:callHistory,
      listFields: {
        text: "text",
        groupBy: "category"
      },
      tabHeader: [
        {
          text: "All"
        },
        {
          text: "Received"
        },
        {
          text: "Missed"
        }
      ],
      types: ["", "received", "missed"],
      listTemplate: function() {
        return {
          template: callHistoryTemplate
        };
      }
    };
  },
  methods: {
    onSelected: function(args) {
      let element01 = this.$refs.allcall;
      let element02 = this.$refs.receivedcall;
      let element03 = this.$refs.missedcall;
      if (element01 !== undefined && element01.ej2Instances !== undefined) {
        let listObjects = [element01, element02, element03];
        let newData = [];
        newData = this.filterData(
          this.callHistoryData,
          this.types[args.selectedIndex]
        );
        listObjects[args.selectedIndex].ej2Instances.dataSource = newData;
      }
    },
    filterData: function(dataSource, value) {
      let newData = [];
      dataSource.filter(function(data) {
        if (data.id.indexOf(value) !== -1) {
          newData.push(data);
        }
      });
      return newData;
    },
    onComplete: function() {
      if (Browser.isDevice) {
        document
          .getElementsByClassName("layoutWrapper")[0]
          .classList.add("e-device-layout");
        document
          .getElementsByClassName("tabContainer")[0]
          .classList.add("e-visbile-layer");
      }
    }
  }
});
</script>
